<template>
  <div style="padding-top: 20px;">
    <div style=" width: 1200px;height: 500px; margin: 0 auto; background: #fff;padding: 20px;">
      <div style="font-size: 18px">
        <h2>个人资料</h2>
        <br/>
        我的昵称：{{ id && id.username }}<br/>
        我的email： {{ id && id.email }}<br/>
      </div>
      <hr>
    </div>
  </div>
</template>

<script>
import {mapState, mapGetters, mapActions, mapMutations} from 'vuex'

export default {

  data () {
    return {
      id: JSON.parse(localStorage.getItem('id')),
      msg: 'Welcome to Your Vue.js App',
      arr: []

    }
  },

  computed: {
    ...mapState(['userInfo'])
  },
  mounted () {
    this.$store.dispatch('getser', localStorage.getItem('id'))
  },
  methods: {}
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
  font-weight: normal;
}

ul {
  list-style-type: none;
  padding: 0;
}

li {
  display: inline-block;
  margin: 0 10px;
}

a {
  color: #42b983;
}
</style>
